<template>
  <div>
    <div class="Cjlr_chao">
      <h4 style="margin-left:1%">操作说明:</h4>
      <p class="Cjlr_p"> * 该功能主要用于设置课程相关的信息，包括新增和编辑等操作,课程是与班级绑定的,每个班级都可以设置自己的课程,与其他班级无关。</p>
    </div>
    <div class="content">
      <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="所属项目" style="float: left;">
            <el-select v-model="form.project_name" placeholder="请选择项目">
              <el-option v-for="(i,index) in arr " :key="index" 
                :label="i.name" :value="i.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属班级" style="float: left;">
            <el-select v-model="form.class_name" placeholder="请选择班级">
              <el-option v-for="(i,index) in arrclass" :key="index"
              :label="i.class_name" :value="i.class_name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="成绩分组" style="float: left;">
            <el-select v-model="form.grouping" placeholder="请选择分组">
              <el-option v-for="(i,index) in Cjli" :key="index"
              :label="i.grouping" :value="i.grouping"></el-option>
            </el-select>
          </el-form-item>
          <div style="clear:both"></div>
          <el-form-item label="学生姓名" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmits()">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          name:'',
          project_name:'',
          class_name:'',
          grouping:'',
        },
        arr:{},
        arrclass:{},
        Cjli:[]
      }
    },
    methods: {
      // 添加
      onSubmits() {
        console.log('submit!');
      },
      // 请求项目
      getstudent() {
        this.$http.get("/api/getstudent").then((res) => {
          console.log(res.data);
          this.arr = res.data
          console.log(this.arr);
        });
      },
      // 请求班级
      outclasss(newValue) {
        this.$http.get(`/api/outclass?project=`+ newValue).then((res) => {
          this.arrclass = res.data
        });
      },
      // 请求分组数据
      grouping(newValue){
        this.$http.get(`/api/getgrouping?grouping=`+newValue).then((res) => {
          this.Cjli = res.data
          console.log(this.Cjli)
        });
      }
    },
    watch:{
      'form.project_name'(newValue){
        this.outclasss(newValue)
      },
      'form.class_name'(newValue){
        console.log(111111111133333333)
        this.grouping(newValue)
      }
    },
    created(){
      this.getstudent()
    }
  }
</script>

<style scoped>
  .content{
    overflow: hidden;
    margin: auto 15%;
    margin-top: 1%;
    border: solid;
    padding: 1% 1% 1% 1%;
  }
/* 提示框 */
  .Cjlr_chao{
    height: 50px;
    border: 1px #dcdcdc solid;
    border-radius: 12px;
    box-shadow: 2px 2px 2px #c4c3c3;
    background: whitesmoke;
    margin-left: 4%;
    margin-top: 1%;
  }
  .Cjlr_p{
    font-size: 12px;
    padding-left: 1%;
    padding-top: 0.5%;
  }
</style>